<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

<meta http-equiv="pragma" content="no-cache">
<!-- HTTP 1.0 -->
<meta http-equiv="cache-control" content="no-cache">

<meta charset="utf-8">
<link rel="stylesheet" href="{MODULE_URL}resource/css/style.css" />
{if $color!=""}
<link rel="stylesheet" href="{MODULE_URL}resource/css/{$color}.css" />
{/if}
<script src="{MODULE_URL}resource/js/jquery-2.1.4.min.js"></script>
<script src="{MODULE_URL}resource/js/circle-progress.js"></script>
<title>{$huodongname}</title>
{php echo register_jssdk();} 
</head>
<body>
<?php 
	if(count($questionlist)>0){
		$answerA=$questionlist[0]["answerA"];
		$answerB=$questionlist[0]["answerB"];
		$answerC=$questionlist[0]["answerC"];
		$answerD=$questionlist[0]["answerD"];
		$question=$questionlist[0]["question"];
		$type=$questionlist[0]["type"];
		$quesimage=$questionlist[0]["quesimage"];
	}
?>
<div class="dtTop">
<!-- 
 <span class="fr" style="margin-right:40px;"><i class="iconfont">&#xe603;</i> 还剩<span id="lasttime"></span>秒</span>
 -->
 
  <span>第<span id="nownum"></span>题&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;共<span id="totalnum">{$total}</span>题</span>
  
</div>
<div class="main">
<?php $i=1; ?>
{loop $questionlist $row}		
  <!--this-->
  <div {if !empty($row["quesimage"])}class="mainBox hasImg"{/if}{if empty($row["quesimage"])}class="mainBox noImg"{/if}>
	<div class="bc-container">
			<div class="circle"></div>
			<span class="lasttime"></span>
		<!--header-->
		<div class="header">
			<!--如果有图，则显示-->
			{if !empty($row["quesimage"])}
			<img src="{$_W['attachurl']}{$row['quesimage']}">
			{/if}	
			<!--标题-->
			<div class="tit clearfix">
			
				<i class="list">{$i}.</i>
				<!-- {if $row["type"]==1}
				<span class="radio"></span>
				{/if}
				{if $row["type"]==2}
				<span class="checkbox"></span>
				{/if} -->
				<h2><?php echo htmlspecialchars_decode($row["question"]); ?></h2>
			</div>	
		</div>
		
		
		<!--select list-->
		<div class="optionItem">
			{if $row["type"]==1}
			<!--answer list-->
			<ul class="dan ul{$i}">
				<li>
					<input type="radio" name="answer" value="A" /><span>A.{$row["answerA"]}</span>
				</li>
				<li>
					<input type="radio" name="answer" value="B" /><span>B.{$row["answerB"]}</span>
				</li>
				{if !empty($row["answerC"])}
				<li>
					<input type="radio" name="answer" value="C" /><span>C.{$row["answerC"]}</span>
				</li>
				{/if}
				{if !empty($row["answerD"])}
				<li>
					<input type="radio" name="answer" value="D" /><span>D.{$row["answerD"]}</span>
				</li>
				{/if}
			</ul>
			{/if}	
			{if $row["type"]==2}
			<ul class="duo ul{$i}">
				<li>
					<input type="checkbox" name="answer" value="A" /><span>A.{$row["answerA"]}</span>
				</li>
				<li>
					<input type="checkbox" name="answer" value="B" /><span>B.{$row["answerB"]}</span>
				</li>
				{if !empty($row["answerC"])}
				<li>
					<input type="checkbox" name="answer" value="C" /><span>C.{$row["answerC"]}</span>
				</li>
				{/if}
				{if !empty($row["answerD"])}
				<li>
					<input type="checkbox" name="answer" value="D" /><span>D.{$row["answerD"]}</span>
				</li>
				{/if}
			</ul>
			{/if}	
			{if $i<$total}
			<!--next-->
			<div class="next">
				<span class="btn" onclick="nextquest({$row['type']})">下一题</span>
			</div>
			{/if}
			{if $i==$total}
			<!--next-->
			<div class="next">
				<span class="checkanswer" onclick="checkanswer({$row['type']})">提交答案</span>
			</div>
			{/if}
		</div>	
	</div>  
  </div>
<?php $i++; ?>
{/loop}
</div>
<!--完善信息-->
<div class="imInfo" style="display: none;" id="iminfo">
	<div class="box">
		<h2>请完善个人信息</h2>
		<div id="infoerror" style="color:red;TEXT-ALIGN: center;" class="txt"></div>
		<ul>
			<li><input type="text" id="name" placeholder="请输入姓名（必填）"></li>
			<li><input type="tel" id="phone" placeholder="请输入手机号码（必填）"></li>
			<li><input type="text" id="addr" placeholder="请输入备注（非必填）"></li> 
		</ul>
		<div class="btn"><a href="#" onclick="tijiao()">确认</a></div>
	</div>
</div>
<!--问答提示 start-->
<div class="result-round">
	<h5>准备</h5>
	<div class="box">
	<!-- 
		<div class="txt"><p><i class="iconfont">&#xe607;</i></p><p>总共<span>{$total}</span>道题</p><p>答题时间总共<span>{$questtimes}</span>秒<br>请合理掌握答题节奏！</p></div>
	 -->
	    <div class="txt"></div>
		<div class="btn" style="display: none;">
			<ul class="flex">
				<li><a href="javaScript:;" class="red" onclick="goto()">开始答题</a></li>
			</ul>
		</div>
	</div>
</div>
<!--问答提示 end-->

<!--音乐-->
<!-- 
<audio id="music_audio" loop preload="preload">
  <source src="{$_W['attachurl']}{$reply['music']}" type="audio/mpeg">
  你不支持HTML5，快去换浏览器吧</audio>
<div class="audio">
  <span class="open">
	  <i class="icon"><i class="stop"></i></i><i class="mfly m1"></i><i class="mfly m2"></i>  
  </span>
</div>
{if !empty($qrcode)}
	<div class="Bomb" style="display:none;">
		<div class="BomBox">
				<img src="{$_W['attachurl']}{$qrcode['qrcode']}"/>
				<i></i>
		</div>
	</div>
	
{/if}
 -->

<style>
	.Bomb{position:fixed;top:0;left:0;background:rgba(0,0,0,.8);width:100%;height:100%;}
	.Bomb .BomBox{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:999;}
	.Bomb .BomBox i{width:32px;height:32px;background:#fff;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,.3);position:absolute;top:-12px;right:-12px;display:block;}
	.Bomb .BomBox i:before{content:'';display:block;width:1px;height:15px;background:#333;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%) rotate(45deg);}
	.Bomb .BomBox i:after{content:'';display:block;width:1px;height:15px;background:#333;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%) rotate(-45deg);}
</style>
<script type="text/javascript">
function circle(i){
	$('.circle').eq(i-1).circleProgress({
		value: 1,
		size: 70,
		startAngle: -Math.PI / 4 * 2,
		animation: {
			duration: parseInt("{$questtimes}")*1000
		},
		emptyFill:'#9bb7dc',
		fill: {
			gradient: ['#fff', '#fff']
		}
	});
}
//执行倒计时
window.onload = gocount;


	//设定倒计时时间
	var gotime = 5;
	function gocount()
	{
		//倒计时
		
		
		var gstep = -1;
		$(".txt").text(gotime);
		gotime += gstep;
		//超时
		if(gotime==0){
			goto();
			return;
		}
		gt=setTimeout("gocount()",1000);
	}

//音乐
/*
 * document.addEventListener("WeixinJSBridgeReady", function () {
		$("#music_audio")[0].play(); 
 }, false);
 $(".audio span").bind("click",function(){
 		var Media = document.getElementById("music_audio"); 
 		if($(this).attr("class")=="open"){
 			$(this).removeClass("open");
 			$(this).addClass("closee"); 
 			Media.pause();   //暂停  
 		}else{
 			$(this).removeClass("closee");
 			$(this).addClass("open");
 			Media.play();    //播放  
 		}
 });
 window.addEventListener("load",function(){
     var myaudio=document.getElementById("music_audio");
     myaudio.volume=0.5;//表示的是播放音量为一半
 });
 */

$(document).ready(function(){		
	//答题
	$(".dan li").click(function(){
		$(".dan li input").prop("checked",false);
		$(this).addClass("active").siblings().removeClass("active");
		$(this).find("input").prop("checked",true);
	});
			
	$(".duo li").click(function(){
		$(this).toggleClass("active");
		if($(this).find("input").is(":checked")){
		  $(this).find("input").prop("checked",false);
		}
		else{
		  $(this).find("input").prop("checked",true);	
		}
	});
	
	//下一题
	$(".mainBox .next span.btn").click(function(){
		//$(this).closest(".mainBox").removeClass("fadeIn");
		//$(this).closest(".mainBox").addClass("fadeOut").next(".mainBox").addClass("fadeIn");	
		//清除倒计时
		window.clearTimeout(t)
		//重新倒计时
		lastime = parseInt("{$questtimes}")
		count();
	})
	
	
	//关注二维码弹出窗点击跳转
	$(".Bomb i").click(function(){
		$(".Bomb").hide();
		var url= "{php echo $this->createMobileUrl('chengji')}";
		location.href=url+"&totalpoints="+totalpoints+"&totaltime="+totaltime+"&rid={$rid}&fromid={$fromid}";
	})
})
//开始答题
function goto(){
	$(".result-round").hide();
   //倒计时
	count();
	circle(1);
}
</script>
<script type="text/javascript">

	var nownum=1;
	
	
	var answers="";
	var t;
	//设定倒计时时间
	var lastime = parseInt("{$questtimes}")
	function count()
	{
		//倒计时
		
		
		var step = -1;
		$(".lasttime").text(lastime);
		lastime += step;
		//超时
		if(lastime==0){
			//checkanswer(1);
			//重新计时
			lastime = parseInt("{$questtimes}")
			//判断最后一题
			if(nownum==3){
				checkanswer(1);
			}else{
				//保存答案
				nextquest(1);
				//切换到下一题
				
			//	$(".mainBox").eq(nownum-2).removeClass("fadeIn");
			//	$(".mainBox").eq(nownum-2).addClass("fadeOut").next(".mainBox").addClass("fadeIn");	
			}
			
			return;
		}
		t=setTimeout("count()",1000);
	}
	

	
	
	$(document).ready(function(){
		$("#nownum").text(nownum);
	});
	
	
	
	//存储当前题目答案
	function nextquest(type){
		nownum++;
		
		$("#nownum").text(nownum);
		//问题列表
		<!-- var qstjson='<?php echo json_encode($questionlist) ?>'; -->
		<!-- var qstlist=eval(qstjson); -->
		var nowi=nownum-1;//列表数标

		var thisval="";
		if(type==1){
			thisval=$(".mainBox").eq(nownum-2).find('input:radio:checked').val();
			//alert(thisval);
			
			//判断是否正确
			//答案
	         var realanswers_c="{$realanswers}";     //正确答案
	         var realanswerlist_c=realanswers_c.substring(0,realanswers_c.length-1).split(',');
		//alert(realanswerlist_c[nownum-2]);  答案错误
			    if(thisval!=realanswerlist_c[nownum-2]){
			    	//清除倒计时
			    	alert('报歉回答错正确答案是'+realanswerlist_c[nownum-2]);
					window.clearTimeout(t)
			    	checkanswer(1);
					return false;
			    }else{
			    	$(".mainBox").eq(nownum-2).removeClass("fadeIn");
					$(".mainBox").eq(nownum-2).addClass("fadeOut").next(".mainBox").addClass("fadeIn");	
			    }
		
			
		}else{
			var checval="";
			var vallist=$('.ul'+(nownum-1)+' input:checkbox:checked');
			for(var i=0;i<vallist.length;i++){
				thisval+=vallist[i].defaultValue;
			}
			
		}
		
		answers+=thisval+",";     //用户提交的答案
		//清除倒计时
		window.clearTimeout(t)
		//重新倒计时
		lastime = parseInt("{$questtimes}")
		
		//倒计时
		count();
		circle(nownum);
	}
	var realanswers="{$realanswers}";     //正确答案
	var onepoints="{$onepoints}";//每题分值
	var totalpoints=0;
	var totaltime=0;
	
	//提交所有答案
	function checkanswer(type){
		$(".checkanswer").hide();
		clearTimeout(t);
		totaltime=parseInt("{$questime}")*60-lastime;
		var thisval="";
		if(type==1){
			thisval=$(".mainBox").eq(2).find('input:radio:checked').val();
		}else{
			var checval="";
			var vallist=$('.ul'+nownum+' input:checkbox:checked');
			
			for(var i=0;i<vallist.length;i++){
				thisval+=vallist[i].defaultValue;
			}
		}

		answers+=thisval+",";
		//alert(answers);
		//alert(realanswers);
		var answerlist=answers.substring(0,answers.length-1).split(',');
		var realanswerlist=realanswers.substring(0,realanswers.length-1).split(',');

		//var totalpoints=0;    //循环对比答案
		for(var i=0;i<answerlist.length;i++){
			//if(answerlist[i]==realanswerlist[i]){
				//totalpoints+=parseInt(onepoints);
			//}
			if(answerlist[i]!=realanswerlist[i]){
				totalpoints=0;
				break;
			}else{
				totalpoints="{$zongfen}"
			}
		}
		//var fromid='{$fromid}';
		
		var iswanshan=parseInt("{$iswanshan}");
		iswanshan=0;
		if(iswanshan==1){
			$("#iminfo").show();
		}else{
			var fromid='{$fromid}';
			var url="{php echo $this->createMobileUrl('chengji')}";
			var rid="{$rid}";
			var qrcode = "{$qrcode['qrcode']}";
			//location.href=url+"&totalpoints="+totalpoints+"&totaltime="+totaltime+"&rid="+rid+"&fromid="+fromid;
			$.ajax({ type:'post',
				 data:{'totalpoints':totalpoints, 'totaltime':totaltime,"rid":rid,"fromid":fromid}, 
				 url:"{php echo $this->createMobileUrl('addchengji')}",
				 dataType:'json',
				 async:false, 
				 success:function(data){
				 	if(data.success == 1){
						<!-- if(qrcode.length > 0){ -->
							<!-- $(".Bomb").show(); -->
						<!-- }else{ -->
							<!-- location.href=url+"&totalpoints="+totalpoints+"&totaltime="+totaltime+"&rid="+rid+"&fromid="+fromid; -->
						<!-- } -->
						var points=data.points;
						location.href=url+"&totalpoints="+points+"&totaltime="+totaltime+"&rid="+rid+"&fromid="+fromid;
				 	}else{
						alert('提交成绩失败');
					}
				}
			})
		}
	}
	function tijiao(){
		var name=$("#name").val();
		var phone=$("#phone").val();
		var addr=$("#addr").val();
		var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
		if(name==""){
			$("#infoerror").html("姓名不能为空！");
		}
		else if(phone==""){
			$("#infoerror").html("手机号不能为空！");
		}
		else if(!reg.test(phone)) {
			$("#infoerror").html("手机号格式不正确！");
		}
		else{
			var fromid='{$fromid}';
			var url="{php echo $this->createMobileUrl('chengji')}";
			var rid="{$rid}";
			
			$.ajax({ type:'post',
				 data:{'totalpoints':totalpoints, 'totaltime':totaltime,"rid":rid,"fromid":fromid,"name":name,"phone":phone,"addr":addr}, 
				 url:"{php echo $this->createMobileUrl('addchengji')}",
				 dataType:'json',
				 success:function(data){
				 	if(data.success == 1){
						$(".imInfo").hide();
						if('{$show_qrcode}'=='0'){
							var url= "{php echo $this->createMobileUrl('chengji')}";
							location.href=url+"&totalpoints="+totalpoints+"&totaltime="+totaltime+"&rid={$rid}&fromid={$fromid}";
						}else{
							$(".Bomb").show();
						}
				 		//location.href=url+"&totalpoints="+totalpoints+"&totaltime="+totaltime+"&rid="+rid+"&fromid="+fromid+"&name="+name+"&phone="+phone+"&addr="+addr;
				 	}
					else{
						alert('提交成绩失败');
					}
				}
			})
		}
	}
	
	wx.ready(function(){
		wx.hideOptionMenu();//隐藏右上角按钮
	});
</script>
</body>
</html>
